<template>
  <div class="gesture-recognition">
    <div class="tip" >
      <div class="open" @click="open">点击调取摄像头</div>
      <div class="capture" @click="capture">拍照</div>
      <div class="close" @click="close">关闭摄像头</div>
    </div>
    <div class="txt">
      <div class="txt1">摄像机</div>
      <div class="txt2">拍照图片</div>
    </div>
    <div class="camera">
      <!-- 用于显示媒体设备的视频流 -->
      <video class="cam-item" id="video" ref="video" autoplay width="370" height="500"></video>
      <!-- 描述video的截图 -->
      <canvas id="canvas" class="cam-item" ref="canvas" width="370" height="500"></canvas>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Prop, Options } from 'vue-property-decorator';
import { getAccessToken, getGesture } from '../libs/gesture';
@Options({ components: {} })
export default class GestureRecognition extends Vue {
  public ctx!: CanvasRenderingContext2D;
  public video!: HTMLVideoElement;
  public res ={};
  public accessToken='';
  public mediaStreamTrack: MediaStream|any;
  public timer!: NodeJS.Timeout;
  public close() {
    // console.log(this.mediaStreamTrack);
    this.mediaStreamTrack.getVideoTracks()[0].stop();
    this.ctx.clearRect(0, 0, 370, 500);
    clearTimeout(this.timer);
  }
  public async capture() {
    this.ctx.drawImage(this.video, 0, 0, 370, 500);
    const image = new Image();
    // HTMLCanvasElement.toDataURL() 返回值是base64的
    image.src = (this.$refs.canvas as HTMLCanvasElement).toDataURL('image/png');
    console.log(image.src);

    // 调用手势识别API
    const res = await getGesture(this.accessToken, image.src.split(',')[1]);
    console.log(res.result[0].classname);
  }
  public async run() {
    this.ctx.drawImage(this.video, 0, 0, 370, 500);
    const image = new Image();
    // HTMLCanvasElement.toDataURL() 返回值是base64的
    image.src = (this.$refs.canvas as HTMLCanvasElement).toDataURL('image/png');
    console.log(image.src);

    // 调用手势识别API
    const res = await getGesture(this.accessToken, image.src.split(',')[1]);

    if (res.result.length > 0) {
      console.log(res.result[0].classname, 'success');
      clearTimeout(this.timer);
    } else {
      console.log('false');
      this.timer = setTimeout(() => {
        this.run();
      }, 600);
    }
  }
  public open() {
    navigator.mediaDevices.getUserMedia({
      video: {
        width: 370,
        height: 500,
      },
    }).then((stream) => {
      // 兼容代码
      const compatibleURL = window.URL || window.webkitURL;
      this.video = document.querySelector('video')!;
      this.video!.srcObject = stream;
      this.mediaStreamTrack = stream;

      // 周期性扫描
      this.run();
    })
      .catch((error) => {

      });
  }
  public async mounted() {
    this.ctx = (this.$refs.canvas as HTMLCanvasElement).getContext('2d')!;
    // 获取Access Token
    this.res = await getAccessToken();
    this.accessToken = (await getAccessToken()).access_token;
    console.log(this.accessToken);
  }
}
</script>
<style scoped lang="postcss">
.gesture-recognition {
  touch-action: none;
  .tip{
    display: flex;
    align-items: center;
    justify-content: center;
    .open,.capture,.close{
      width: 200px;height: 50px;
      line-height:50px;
      background: #333;
      color:#fff;
      margin:100px auto;
      font-size: 24px;
    }
  }
  .txt{
    display: flex;
    align-items: center;
    justify-content: space-around;
    .txt1,.txt2{
      font-size: 24px;
    }
  }
  .camera{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 500px;
    .cam-item{
      width: 48%;
      height: 100%;
      margin-right:10px;
      border:1px solid #333;
    }
  }
}

</style>

